// 封装的通用头部组件
<template>
  <div class="titleBar">
    <!-- 一般的顶部导航栏分为左中右三部分,左边一般是返回按钮,中间是标题,右边是自定义的图标,可能是分享或者菜单栏之类 -->
    <!-- 返回键 -->
    <div class="title-left" @click="clickLeft">
      <slot name="left"></slot>
    </div>
    <!-- 标题或者搜索框 -->
    <div class="title-center">
      <slot name="center">
        <div>我是标题</div>
      </slot>
    </div>
    <!-- 右边的分享或者其它选项卡 -->
    <div class="title-right" @click="clickRight">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    clickLeft() {
      this.$emit("clickLeft");
    },
    clickRight() {
      this.$emit("clickRight");
    }
  }
};
</script>

<style scoped>
.titleBar {
  height: 42px;
  display: flex;
  line-height: 49px;
  font-size: 14px;
  box-shadow: 0 1px 1px rgba(100, 100, 100, 0.1);
}

.titleBar .title-left,
.titleBar .title-right {
  position: relative;
  width: 36px;
}

.title-left img,
.title-right img {
  position: absolute;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.titleBar .title-center {
  flex: 1;
  text-align: center;
}
</style>